<template>
    <div class="info-collect">
        <Crumb name="Fixed Price"></Crumb>

        <div class="content">
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="Search By part No"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-input
                        v-model="key1"
                        size="small"
                        class="input"
                        placeholder="Search By part Name"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-button
                        size="small"
                        type="primary"
                        @click="search"
                > Search
                </el-button>
                <el-button type="primary" size="small" @click="download" v-if="urlAvailible('price-download')">Download
                    EXCEL
                </el-button>

            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="partLists"
                        border
                        row-key="id"
                        stripe
                        style="width: 100%">
                    <el-table-column type="expand" label="total" width="80">
                        <template slot-scope="part">
                            <div>
                                <part-detail :partDetail="part.row"></part-detail>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="partsNumber"
                            label="Part No"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="denomination"
                            label="Description"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="designation"
                            label="Description"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="currency"
                            label="Currency"
                    >
                        <template slot-scope="scope">
                            {{cur[scope.row.currency-1]}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            v-if="urlAvailible('part-sale-price')"
                            prop="salePrice"
                            label="Sale Price"
                    >
                        <template slot-scope="scope">
                            <span>{{scope.row.salePrice | money}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            v-if="urlAvailible('purchase-price')"
                            prop="purchasePrice"
                            label="Purchase Price"
                    >
                        <template slot-scope="scope">
                            <span>{{scope.row.purchasePrice | money}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            v-if="urlAvailible('change-part-price')"
                            label="Operate"
                    >
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-edit" @click="openEdit(scope.row)">Edit</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>
            <div class="modal-wrapper">
                <el-dialog
                        title="Sparepart Price"
                        top="10"
                        :visible.sync="dialogVisible"
                        width="80%"
                >

                    <el-form :model="ruleForm" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                        <el-form-item label="Currency" prop="currency">
                            <el-select v-model="ruleForm.currency" placeholder="Currency">
                                <el-option :value="1" label="CNY">CNY</el-option>
                                <el-option :value="2" label="IDR">IDR</el-option>
                                <el-option :value="3" label="USD">USD</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Sale Price" prop="salePrice">
                            <el-input v-model="ruleForm.salePrice"></el-input>
                        </el-form-item>
                        <el-form-item label="Purchase Price" prop="purchasePrice">
                            <el-input v-model="ruleForm.purchasePrice"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitForm">Confirm</el-button>
                    </span>
                </el-dialog>
            </div>

        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import partDetail from '../../components/part/partDetail'
    import {
        getFixedPricePartList, setFixedPrice
    } from "../../api";
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'
    import authMixins from '../../util/authMixins'
    import {baseURL} from "../../util";

    const cur = ['CNY', "IDR", 'USD']

    export default {
        name: "part-price",
        mixins: [mixins, authMixins],
        data() {
            return {
                cur: cur,
                partList: [],
                showEdit: false,
                uniSystem: [],
                uniUnit: [],
                imageList: [],
                part: [],
                ruleForm: {
                    partsId: '',
                    salePrice: 0,
                    purchasePrice: 0
                },
                rules: {},
                filterOption: [],
                key: '',
                key1: '',
                dialogVisible: false,
                stock: {
                    partId: '',
                    quantity: ''
                },
                record: [],
            }
        },
        created() {
            this.getPartList()
        },
        filters: {
            money(num) {
                return num && num.toString()
                    .replace(/^\d+/g, (m) => m.replace(/(?=(?!^)(\d{3})+$)/g, ','))
            }
        },
        computed: {
            btnText() {
                return this.showEdit ? 'Complete' : 'Edit'
            },
            partLists() {
                return this.urlAvailible('show-none-price') ? this.partList : this.partList.filter(item => item.salePrice);
            }
        },
        methods: {
            async getPartList() {
                const {status, data} = await getFixedPricePartList({
                    pageNum: this.pageNum,
                    partsNumber: this.key,
                    description: this.key1
                })
                if (status === ERROR_OK) {
                    this.partList = data.list
                    this.total = data.total
                }
            },
            changePage(page) {
                this.pageNum = page
                this.getPartList()
            },
            search() {
                this.pageNum = 1
                this.getPartList()
            },
            download() {
                window.open(baseURL + '/spare_parts_constant_price/manage/excel_constant_price.file');
            },
            submitForm() {
                this.$refs.ruleForm.validate(async (valid) => {
                    if (valid) {
                        let {status} = await setFixedPrice(this.ruleForm);
                        if (status === 0) {
                            this.$message({
                                message: 'Change Price Successfully',
                                type: 'success'
                            });
                            const target = this.partList.find(item => item.partsId === this.ruleForm.partsId)
                            this.$set(target, `purchasePrice`, this.ruleForm.purchasePrice)
                            this.$set(target, `salePrice`, this.ruleForm.salePrice)
                            this.$set(target, 'currency', this.ruleForm.currency)
                            this.clear();
                            this.dialogVisible = false
                        }

                    } else {
                        return false;
                    }
                });
            },

            clear() {
                this.ruleForm = {
                    partsId: '',
                    purchasePrice: 0,
                    salePrice: 0,
                    currency: 0,
                };

            },
            openEdit(r) {
                this.ruleForm = {
                    partsId: r.partsId,
                    currency: r.currency,
                    salePrice: r.salePrice,
                    purchasePrice: r.purchasePrice
                };
                this.dialogVisible = true

            },

        },
        components: {
            Crumb, Search, partDetail
        }
    }
</script>

<style scoped lang="scss">
    .info-collect {
        background: #f6;
        label {
            display: inline-block;
            line-height: 40px;
            padding: 0 20px;
            border-radius: 3px;
            cursor: pointer;
            background: #409eff;
            height: 40px;
            color: white;
            text-align: center;
            font-size: 14px;
            margin-left: 20px;
            &:hover {
                background: #6495ed;
            }
        }
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
        .btn {
            float: right;
            margin-right: 20px;
            transition: all 1s ease;
            opacity: 0.5;
            &:hover {
                opacity: 1;
            }
        }
    }
</style>